.clipper {
	#interpreter {
		--interpreter-background-color: hsla(var(--color-accent-hsl), 0.075);
		--interpreter-border-color: hsla(var(--color-accent-hsl), 0.15);
		--interpreter-text-color: var(--text-accent);
		display: none;
		flex-direction: column;

		border-radius: 4px;
		background-color: var(--interpreter-background-color);
		border: 1px solid var(--interpreter-border-color);

		&.done {
			--interpreter-background-color: hsla(var(--color-green-hsl), 0.1);
			--interpreter-border-color: hsla(var(--color-green-hsl), 0.15);
			--interpreter-text-color: var(--text-success);
			#model-select {
				opacity: 1;
			}
		}

		&.error {
			--interpreter-background-color: hsla(var(--color-red-hsl), 0.1);
			--interpreter-border-color: hsla(var(--color-red-hsl), 0.15);
			--interpreter-text-color: var(--text-error);
			#model-select {
				opacity: 1;
			}
		}

		#model-select {
			color: var(--interpreter-text-color);
		}
	}

	#prompt-context {
		display: none !important;
	}

	.interpreter-controls {
		display: flex;
		align-items: center;
		padding: 0.25rem 0.5rem;
		padding-inline-end: 0.625rem;
		gap: 0.25rem;
	}

	#model-select {
		user-select: none;
		-webkit-user-select: none;
		cursor: default;
		font-variant: tabular-nums;
		background-image: none;
		background-color: transparent;
		color: var(--interpreter-text-color);
		font-family: var(--font-monospace-default);
		height: 1.5rem;
		appearance: none;
		border-radius: 4px;
		border: none;
		box-shadow: none;
		flex-shrink: 1;
		max-width: 50%;
		font-size: 0.6875rem;
		padding: 0px;
		padding-inline-end: 1.25rem;
		text-overflow: ellipsis;
		color: var(--text-accent);
		opacity: 0.75;
		@media (hover: hover) {
			&:hover {
				opacity: 1;
			}
		}
		&:active,
		&:focus {
			box-shadow: none;
		}
	}

	#interpret-btn {
		cursor: default;
		user-select: none;
		-webkit-user-select: none;
		font-family: var(--font-monospace-default);
		font-weight: 600;
		font-size: 0.75rem;
		height: 1.5rem;
		padding: 0;
		box-shadow: none;
		width: auto;
		white-space: nowrap;
		background-color: transparent;
		flex-grow: 1;
		text-align: end;
		color: var(--text-accent);

		&.processing {
			pointer-events: none;
			cursor: default;
			color: var(--text-accent);
			@media (hover: hover) {
				&:hover {
					color: var(--text-accent);
				}
			}
		}
		&.done {
			pointer-events: none;
			cursor: default;
			color: var(--text-success);
			opacity: 1;
			@media (hover: hover) {
				&:hover {
					color: var(--text-success);
				}
			}
			~ {
				#interpreter-timer {
					color: var(--text-success);
				}
			}
		}
		&.error {
			pointer-events: none;
			cursor: default;
			color: var(--text-error);
			opacity: 1;
			@media (hover: hover) {
				&:hover {
					color: var(--text-error);
				}
			}
			~ {
				#interpreter-timer {
					color: var(--text-error);
				}
			}
		}
		@media (hover: hover) {
			&:hover {
				color: var(--color-accent-3);
			}
		}
	}

	#interpreter-timer {
		user-select: none;
		-webkit-user-select: none;
		cursor: default;
		font-size: 0.75rem;
		color: var(--text-accent);
		min-width: 2rem;
		text-align: end;
		font-family: var(--font-monospace-default);
		font-variant: tabular-nums;
	}

	.token-counter {
		display: none;
		padding: 0.5rem 0.5rem;
		font-size: 0.6875rem;
		color: var(--text-muted);
		font-family: var(--font-monospace-default);
		border-top: 1px solid var(--interpreter-border-color);
		
		&.warning {
			color: var(--text-warning);
		}
		
		&.error {
			color: var(--text-error);
		}
	}

	#interpreter-error {
		border-top: 1px solid  hsla(var(--color-red-hsl), 0.15);
		padding: 0.5rem;
		font-size: var(--font-ui-smaller);
		color: var(--text-error);
		white-space: pre-wrap;
		word-break: break-word;
		max-height: 150px;
		overflow-y: auto;
		display: none;
		line-height: 1.2;
	}
}

.model-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	
	.setting-item {
		border: none;
		padding: 0;
	}

	.setting-item-info {
		margin-bottom: 0.5rem;
		
		label {
			font-weight: 600;
			margin-bottom: 0.25rem;
			display: block;
		}
	}

	.setting-item-description {
		color: var(--text-muted);
		font-size: var(--font-ui-smaller);
		margin-bottom: 0.25rem;
	}

	.setting-item-control {
		input {
			width: 100%;
		}
	}
}

#model-modal {
	.modal {
		max-width: 500px;
	}
}

.model-list-container {
	margin-bottom: 24px;
	overflow-x: scroll;
}

.provider-list-container {
	overflow-x: scroll;
}

#interpreter-section {
	&.is-disabled {
		form > div:not(:first-child) {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}

#model-list {
	margin: 0 0 0.5rem 0;
	.model-list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		border-bottom: 1px solid var(--background-modifier-border);
		padding: 0.25rem 0;
		user-select: none;
		line-height: 1.2;
	}
	.model-list-item-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		margin-inline-start: auto;
		flex-shrink: 0;
		.clickable-icon {
			height: var(--clickable-icon-size);
			width: var(--clickable-icon-size);
		}
		.checkbox-container {
			margin-inline-start: 0.5rem;
		}
	}
	.model-list-item-info {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		width: 60%;
	}
	.model-name {
		font-size: var(--font-ui-small);
		min-width: 50%;
	}
	.model-provider {
		font-size: var(--font-ui-smaller);
		color: var(--text-muted);
	}
	.model-provider-unknown {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		color: var(--text-warning);
	}
}

#provider-list {
	margin: 0 0 0.5rem 0;
	.provider-list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		border-bottom: 1px solid var(--background-modifier-border);
		padding: 0.25rem 0;
		user-select: none;
		line-height: 1.2;

		.provider-list-item-info {
			display: flex;
			flex-direction: row;
			gap: 0.5rem;
			width: 60%;

		}
		.provider-name {
			font-size: var(--font-ui-small);
			min-width: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 0.5rem;
		}
		.provider-name-text {
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.provider-no-key {

			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 0.25rem;
			font-size: var(--font-ui-smaller);
			color: var(--text-warning);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.provider-list-item-actions {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			margin-inline-start: auto;
			flex-shrink: 0;
			.clickable-icon {
				height: var(--clickable-icon-size);
				width: var(--clickable-icon-size);
			}
		}
	}
}
.provider-icon-container {
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 50%;
	display: inline-block;
	min-width: 1.75rem;
	width: 1.75rem;
	height: 1.75rem;
	overflow: hidden;
	padding: 0.25rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.provider-icon {
	display: inline-block;
	background-color: var(--text-normal);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: 50% 50%;
	height: 100%;
	width: 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-scan-text'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 8h8'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M7 16h6'/%3E%3C/svg%3E");
}
.mod-rtl {
	.provider-icon {
		mask-position: 100% 50%;
	}
}